<template>
  <MainContent>
    <div class="demo">
      <div class="label">标签选择：</div>
      <div class="content">
        <TagSelect v-model:value="type" :list="typeList" :size="'large'" />
      </div>
    </div>
    <div class="demo">
      <div class="label">标签选择：</div>
      <div class="content">
        <TagSelect v-model:value="type" :list="typeList2" />
      </div>
    </div>
    <div class="demo">
      <div class="label">标签选择：</div>
      <div class="content">
        <TagSelect v-model:value="type" :list="typeList" :size="'small'" />
      </div>
    </div>
    <div class="demo">
      <div class="label">标签选择：</div>
      <div class="content">
        <TagSelect v-model:value="type" :list="typeList" :size="'small'" round />
      </div>
    </div>

    <div class="demo">
      <div class="label">标签选择：</div>
      <div class="content">
        <TagSelect v-model:value="type" :list="typeList" :round="true" />
      </div>
    </div>

    <div class="demo">
      <div class="label">标签选择：</div>
      <div class="content">
        <TagSelect v-model:value="type" :list="typeList" :round="true" type="success" />
      </div>
    </div>
    <div class="demo">
      <div class="label">标签选择：</div>
      <div class="content">
        <TagSelect v-model:value="type" :list="typeList" :round="true" type="info" />
      </div>
    </div>
    <div class="demo">
      <div class="label">标签选择：</div>
      <div class="content">
        <TagSelect v-model:value="type" :list="typeList" :round="true" type="danger" />
      </div>
    </div>
    <div class="demo">
      <div class="label">标签选择：</div>
      <div class="content">
        <TagSelect v-model:value="type" :list="typeList" :round="true" type="warning" />
      </div>
    </div>

    <div class="demo">
      <div class="label">标签选择：</div>
      <div class="content">
        <TagSelect v-model:value="type" :list="typeList" :size="'small'" :round="true" type="warning">
          <template v-slot:opt="scope">
            {{ scope.data.label }}
          </template>
        </TagSelect>
      </div>
    </div>

    <div class="demo">
      <div class="label">分段选择：</div>
      <div class="content">
        <Segmented v-model:value="type" :list="typeList2"></Segmented> <br />
        <Segmented v-model:value="type" :list="typeList2" :size="'small'"></Segmented> <br />
        <Segmented v-model:value="type" :list="typeList2" :size="'large'"></Segmented> <br />
      </div>
    </div>

    <div class="demo">
      <div class="label">分段选择：</div>
      <div class="content">
        <Segmented v-model:value="type" :list="typeList2" type="info"></Segmented> <br />
        <Segmented v-model:value="type" :list="typeList2" type="warning"></Segmented> <br />
      </div>
    </div>

    <div class="demo">
      <div class="label">分段选择：</div>
      <div class="content">
        <Segmented v-model:value="type" :list="typeList2" type="success"></Segmented> <br />
        <Segmented v-model:value="type" :list="typeList2" type="danger"></Segmented> <br />
      </div>
    </div>

    <div class="demo">
      <div class="label">分段选择：</div>
      <div class="content">
        <Segmented v-model:value="type" :list="typeList2" type="success" :block="true"></Segmented>
        <br />
      </div>
    </div>

    <div class="demo">
      <div class="label">分段选择：</div>
      <div class="content">
        <Segmented v-model:value="type" :list="typeList2" :block="true" :plain="true"></Segmented>
        <br />
      </div>
    </div>
    <div class="demo">
      <div class="label">分段选择：</div>
      <div class="content">
        <Segmented v-model:value="type" :list="typeList2" type="success" :block="true" :plain="true"></Segmented>
        <br />
      </div>
    </div>

    <div class="demo">
      <div class="label">分段选择：</div>
      <div class="content">
        <Segmented v-model:value="type" :list="typeList2" type="warning" :block="true" :plain="true"></Segmented>
        <br />
      </div>
    </div>

    <div class="demo">
      <div class="label">分段选择：</div>
      <div class="content">
        <Segmented v-model:value="type" :list="typeList2" type="info" :block="true" :plain="true"></Segmented>
        <br />
      </div>
    </div>

    <div class="demo">
      <div class="label">分段选择：</div>
      <div class="content">
        <Segmented v-model:value="type" :list="typeList2" type="danger" :block="true" :plain="true"></Segmented>
        <br />
      </div>
    </div>

    <div class="demo">
      <div class="label">分段选择：</div>
      <div class="content">
        <Segmented v-model:value="type" :list="typeList" :size="'small'" type="warning" :block="true">
          <template v-slot:opt="scope">
            <DynamicIcon icon="SvgIconTheme" />
            {{ scope.data.label }}
          </template>
        </Segmented>
      </div>
    </div>
    <div class="demo">
      <div class="label">分段选择：</div>
      <div class="content">
        <Segmented v-model:value="type2" :list="typeList3" :size="'small'" type="warning" :block="true">
          <template v-slot:opt="scope">
            <DynamicIcon icon="SvgIconTheme" />
            {{ scope.data.label }}
          </template>
        </Segmented>
      </div>
    </div>

    <div class="demo">
      <div class="label">分段选择：</div>
      <div class="content">
        <Segmented v-model:value="type2" :list="typeList3" :size="'small'" type="warning" :block="true"
          ref="segmentedRef">
          <template v-slot:opt="scope">
            <DynamicIcon icon="SvgIconTheme" />
            {{ scope.data.label }}
          </template>
        </Segmented>
        <el-button @click="segmentedSelect"> 更新 </el-button>
      </div>
    </div>

    <div class="demo">
      <div class="label">数值：</div>
      <div class="content">
        <Flop :number="num" />
        <el-button @click="num = '45465465465'" v-ripple> 更新 </el-button>
      </div>
    </div>

    <div class="demo">
      <div class="label">数值：</div>
      <div class="content">
        <Flop number="1898919" :speed="666" />
      </div>
    </div>

    <div class="demo">
      <div class="label">数值：</div>
      <div class="content">
        <Flop number="189899" unit="RMB" :speed="666" />
      </div>
    </div>

    <div class="demo">
      <div class="label">图标：</div>
      <div class="content">
        <DynamicIcon icon="Close" />
        <DynamicIcon icon="SvgIconTheme" />
      </div>
    </div>

    <div class="demo">
      <div class="label">确认：</div>
      <div class="content">
        <PopoverConfirm v-model:visible="showConfirm">
          <el-button @click="showConfirm = true"> 确认 </el-button>
        </PopoverConfirm>
      </div>
    </div>
    <div class="demo">
      <div class="label">全局loading：</div>
      <div class="content">
        <el-button @click="openLoading">打开</el-button>
      </div>
    </div>
    <div class="demo">
      <div class="label">自定义loading：</div>
      <div class="content" v-img-lazy>
        <el-button @click="openLoading2">打开</el-button>
      </div>
    </div>
    <div class="demo">
      <div class="label">图片懒加载：</div>
      <div class="content">
        <img style="height: 50px" :src="img2" v-img-lazy="'https://img0.baidu.com/it/u=2159574576,3189551048&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=361'
          " />
      </div>
    </div>
    <div class="demo">
      <div class="label">图标选择：</div>
      <div class="content">
        <IconSelect v-model:value="icon" :extendIcons="['SvgIconStartMenu']" />
      </div>
    </div>
    <div class="demo">
      <div class="label">图标选择：</div>
      <div class="content">
        <IconSelect v-model:value="icon" :extendIcons="['SvgIconStartMenu']">
          {{ icon ? icon : '选择' }}
        </IconSelect>
      </div>
    </div>
    <div class="demo">
      <div class="label">图标选择：</div>
      <div class="content">
        <IconSelect v-model:value="icon" :extendIconTabLabel="'菜单图标'" :defaultEnabled="true"
          :extendIcons="['SvgIconStartMenu']" />
      </div>
    </div>

    <div class="demo">
      <div class="label">代码高亮：</div>
      <div class="content">
        <pre v-highlight><code class="javascript">{{ sourcecode }}</code></pre>
      </div>
    </div>
    可通过在web/assets/index.scss中添加其它样式覆盖
    <div class="demo">
      <div class="label">代码高亮：</div>
      <div class="content">
        <pre v-highlight="sourcecode"><code class="javascript"></code></pre>
      </div>
    </div>
    <div class="demo">
      <div class="label">水波动画：</div>
      <div class="content">
        <el-button v-ripple type="success"> 点一下 </el-button>
        <el-button v-ripple type="primary"> 点一下 </el-button>
        <el-button v-ripple type="info"> 点一下 </el-button>
        <RippleButton type="info" loading> Loading </RippleButton>
        <RippleButton type="primary" ref="rippleButtonRef" @click="getRippleButtonMethod">
          点一下
        </RippleButton>
      </div>
    </div>
    <div class="demo">
      <div class="label">看板：</div>
      <div class="content" style="height: 300px">
        <DataBoard :list="list" :cardStyle="{ padding: '12px', fontSize: '12px' }" @cardClick="cardClick">
          <template #header="scope">
            <DynamicIcon
              :icon="(scope.data.header as any)['icon'] ? (scope.data.header as any)['icon'] : 'ChatLineRound'">
            </DynamicIcon>
            {{ scope.data.header.title }}
          </template>
        </DataBoard>
      </div>
    </div>

    <div class="demo">
      <div class="label">图片查看框：</div>
      <div class="content" style="height: 500px">
        <ImgPreviewBox :list="imgList" />
      </div>
    </div>

    <div class="demo">
      <div class="label">图片查看框：</div>
      <div class="content" style="height: 500px; width: 600px">
        <ImgPreviewBox :list="imgList">
          <template #tools-btns="scope">
            <div style="margin-left: 10px;">这里可以添加自己按钮：{{ scope.data.index }}</div>
          </template>
        </ImgPreviewBox>
      </div>
    </div>
  </MainContent>
</template>

<script setup lang="ts">
import { defineComponent, h, onMounted, ref } from 'vue'
import {
  imgLazy,
  IconSelect,
  highlight,
  Segmented,
  type SegmentedOption,
  ripple,
  RippleButton,
  DataBoard,
  ImgPreviewBox,
  type DataBoardInfo,
  type DataBoardInfoItem,
  type ImgPreviewBoxImg
} from 'hippo-module-core'

import img1 from '../../assets/img/demo/1.jpeg'
import img2 from '../../assets/img/demo/2.jpeg'
import img3 from '../../assets/img/demo/3.jpeg'
import img4 from '../../assets/img/demo/4.jpeg'
import img5 from '../../assets/img/demo/5.jpeg'
import img6 from '../../assets/img/demo/6.jpeg'
import img7 from '../../assets/img/demo/7.jpeg'
import img8 from '../../assets/img/demo/8.jpeg'
import img9 from '../../assets/img/demo/9.jpeg'
import img10 from '../../assets/img/demo/10.jpeg'
import img11 from '../../assets/img/demo/11.jpeg'
import img12 from '../../assets/img/demo/12.jpeg'
import img13 from '../../assets/img/demo/13.jpeg'
import img14 from '../../assets/img/demo/14.jpeg'
import img15 from '../../assets/img/demo/15.jpeg'
import img16 from '../../assets/img/demo/16.jpeg'
import img17 from '../../assets/img/demo/17.jpeg'
import img18 from '../../assets/img/demo/18.jpeg'
import img19 from '../../assets/img/demo/19.jpeg'
import img20 from '../../assets/img/demo/20.jpeg'
import img21 from '../../assets/img/demo/21.jpeg'
import img22 from '../../assets/img/demo/22.jpeg'
import img23 from '../../assets/img/demo/23.jpeg'
import img24 from '../../assets/img/demo/24.jpeg'
import img25 from '../../assets/img/demo/25.jpeg'

const imgs = [
  img1,
  img2,
  img3,
  img4,
  img5,
  img6,
  img7,
  img8,
  img9,
  img10,
  img11,
  img12,
  img13,
  img14,
  img15,
  img16,
  img17,
  img18,
  img19,
  img20,
  img21,
  img22,
  img23,
  img24,
  img25
]

import {
  TagSelect,
  type TagSelectOption,
  Flop,
  PopoverConfirm,
  LoadingBarBox,
  type LoadingBar
} from 'hippo-module-core'

const vImgLazy = imgLazy

const vHighlight = highlight
const vRipple = ripple

const showConfirm = ref(false)
const num = ref('89894564')

const icon = ref('')

const rippleButtonRef = ref()

const sourcecode = ref<string>(
  "import { Options,Highlighter,registerLanguages,htmlRender,init} from 'highlightjs';"
)

const list = ref([
  {
    id: 'fdsafsadf',
    width: 250,
    header: {
      lineColor: '#39bada',
      title: '未开始',
      icon: 'SwitchButton'
    },
    items: [
      {
        id: 'fdsfsdf',
        content:
          'Background Intelligent Transfer Service 服务的启动类型从 自动启动 更改为 按需启动。🔖✨',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsdfsadffsdf',
        content:
          '💕😘删除 URL 组0xFE00000E20000010。状态0x0。用户 LOCAL SERVICE \Device\HarddiskVolume3\Windows\System32\svchost.exe0x11E4可执行文件路径的进程 ID',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsadfdf',
        content: '对api接口进行大量的分析与规划🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsfsdadfdf',
        content:
          '在 TCP 网络上检测出有重复名称。 发送消息的计算机的 IP 地址在数据中。 请在命令窗口中使用 nbtstat -n 来查看哪个名称冲突。🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsaadfdf',
        content:
          '时间服务正在使用引用 ID 为 1213185300 的时间源 time.windows.com,0x9 (ntp.m|0x9|0.0.0.0:123->20.189.79.72:123) 同步系统时间。当前本地层次编号为 4。🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsaddfdff',
        content:
          '时间提供程序“VMICTimeProvider”指示，当前的硬件和运行环境不受支持并且已停止。对于非 HyperV 来宾环境中的 VMICTimeProvider，这是正常现象。对于当前操作环境中的当前提供程序，这可能也是正常现象。🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfdsfsadfdff',
        content: '名称的名称解析wpad在未响应任何配置的 DNS 服务器后超时。客户端 PID 29232.🌈🍭',
        date: '2023-9-1 18:58:59'
      }
    ]
  },
  {
    id: 'fdsafffsd3ffsdafsadf',
    width: 300,
    header: {
      color: '#000',
      lineColor: '#0d7b34',
      backgroundColor: '#d5fde3',
      title: '已计划',
      icon: 'MessageBox'
    },
    items: []
  },
  {
    id: 'fdsafdafa3safdf',
    width: 280,
    header: {
      color: '#000',
      lineColor: '#d8c70d',
      backgroundColor: '#fdfad5',
      title: '已立项'
    },
    items: [
      {
        id: 'fdsfsdf',
        content:
          'Background Intelligent Transfer Service 服务的启动类型从 自动启动 更改为 按需启动。🔖✨',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsdfsadffsdf',
        content:
          '💕😘删除 URL 组0xFE00000E20000010。状态0x0。用户 LOCAL SERVICE \Device\HarddiskVolume3\Windows\System32\svchost.exe0x11E4可执行文件路径的进程 ID',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsadfdf',
        content: '对api接口进行大量的分析与规划🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsfsdadfdf',
        content:
          '在 TCP 网络上检测出有重复名称。 发送消息的计算机的 IP 地址在数据中。 请在命令窗口中使用 nbtstat -n 来查看哪个名称冲突。🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsaadfdf',
        content:
          '时间服务正在使用引用 ID 为 1213185300 的时间源 time.windows.com,0x9 (ntp.m|0x9|0.0.0.0:123->20.189.79.72:123) 同步系统时间。当前本地层次编号为 4。🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsaddfdff',
        content:
          '时间提供程序“VMICTimeProvider”指示，当前的硬件和运行环境不受支持并且已停止。对于非 HyperV 来宾环境中的 VMICTimeProvider，这是正常现象。对于当前操作环境中的当前提供程序，这可能也是正常现象。🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfdsfsadfdff',
        content: '名称的名称解析wpad在未响应任何配置的 DNS 服务器后超时。客户端 PID 29232.🌈🍭',
        date: '2023-9-1 18:58:59'
      }
    ]
  },
  {
    id: 'fdsaffsfsdf654adf',
    width: 250,
    header: {
      color: '#000',
      lineColor: '#d21766',
      backgroundColor: '#fecae0',
      title: '研发中'
    },
    items: [
      {
        id: 'fdsfsdf',
        content:
          'Background Intelligent Transfer Service 服务的启动类型从 自动启动 更改为 按需启动。🔖✨',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsdfsadffsdf',
        content:
          '💕😘删除 URL 组0xFE00000E20000010。状态0x0。用户 LOCAL SERVICE \Device\HarddiskVolume3\Windows\System32\svchost.exe0x11E4可执行文件路径的进程 ID',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsadfdf',
        content: '对api接口进行大量的分析与规划🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsfsdadfdf',
        content:
          '在 TCP 网络上检测出有重复名称。 发送消息的计算机的 IP 地址在数据中。 请在命令窗口中使用 nbtstat -n 来查看哪个名称冲突。🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsaadfdf',
        content:
          '时间服务正在使用引用 ID 为 1213185300 的时间源 time.windows.com,0x9 (ntp.m|0x9|0.0.0.0:123->20.189.79.72:123) 同步系统时间。当前本地层次编号为 4。🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsaddfdff',
        content:
          '时间提供程序“VMICTimeProvider”指示，当前的硬件和运行环境不受支持并且已停止。对于非 HyperV 来宾环境中的 VMICTimeProvider，这是正常现象。对于当前操作环境中的当前提供程序，这可能也是正常现象。🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfdsfsadfdff',
        content: '名称的名称解析wpad在未响应任何配置的 DNS 服务器后超时。客户端 PID 29232.🌈🍭',
        date: '2023-9-1 18:58:59'
      }
    ]
  },
  {
    id: 'fdsafsh346gdfsgasfdsaadf',
    width: 250,
    header: {
      color: '#000',
      lineColor: '#d217d0',
      backgroundColor: '#fcd1fb',
      title: '研发完毕'
    },
    items: [
      {
        id: 'fdsfsdf',
        content:
          'Background Intelligent Transfer Service 服务的启动类型从 自动启动 更改为 按需启动。🔖✨',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsdfsadffsdf',
        content:
          '💕😘删除 URL 组0xFE00000E20000010。状态0x0。用户 LOCAL SERVICE \Device\HarddiskVolume3\Windows\System32\svchost.exe0x11E4可执行文件路径的进程 ID',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsadfdf',
        content: '对api接口进行大量的分析与规划🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsfsdadfdf',
        content:
          '在 TCP 网络上检测出有重复名称。 发送消息的计算机的 IP 地址在数据中。 请在命令窗口中使用 nbtstat -n 来查看哪个名称冲突。🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsaadfdf',
        content:
          '时间服务正在使用引用 ID 为 1213185300 的时间源 time.windows.com,0x9 (ntp.m|0x9|0.0.0.0:123->20.189.79.72:123) 同步系统时间。当前本地层次编号为 4。🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsaddfdff',
        content:
          '时间提供程序“VMICTimeProvider”指示，当前的硬件和运行环境不受支持并且已停止。对于非 HyperV 来宾环境中的 VMICTimeProvider，这是正常现象。对于当前操作环境中的当前提供程序，这可能也是正常现象。🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfdsfsadfdff',
        content: '名称的名称解析wpad在未响应任何配置的 DNS 服务器后超时。客户端 PID 29232.🌈🍭',
        date: '2023-9-1 18:58:59'
      }
    ]
  },
  {
    id: 'fdsafsfas534fsafaafdf',
    width: 250,
    header: {
      color: '#000',
      lineColor: '#0aa5ab',
      backgroundColor: '#d1fafc',
      title: '测试中'
    },
    items: [
      {
        id: 'fdsfsdf',
        content:
          'Background Intelligent Transfer Service 服务的启动类型从 自动启动 更改为 按需启动。🔖✨',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsdfsadffsdf',
        content:
          '💕😘删除 URL 组0xFE00000E20000010。状态0x0。用户 LOCAL SERVICE \Device\HarddiskVolume3\Windows\System32\svchost.exe0x11E4可执行文件路径的进程 ID',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsadfdf',
        content: '对api接口进行大量的分析与规划🌈🍭',
        date: '2023-9-1 18:58:59'
      }
    ]
  },
  {
    id: '2fdsa34fsfas53fdsa4fsaafaafdf',
    width: 350,
    header: {
      color: '#000',
      lineColor: '#b1430d',
      backgroundColor: '#f9cdb8',
      title: '测试完毕'
    },
    items: [
      {
        id: 'fdsfsdf',
        content:
          'Background Intelligent Transfer Service 服务的启动类型从 自动启动 更改为 按需启动。🔖✨',
        date: '2023-9-1 18:58:59'
      }
    ]
  },
  {
    id: 'fd34fsfas5dfa3fdsa4fsaafaafdf',
    width: 350,
    header: {
      color: '#000',
      lineColor: '#7bad11',
      backgroundColor: '#eafbc6',
      title: '产品上线'
    },
    items: [
      {
        id: 'fdsfsdf',
        content:
          'Background Intelligent Transfer Service 服务的启动类型从 自动启动 更改为 按需启动。🔖✨',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsdfsadffsdf',
        content:
          '💕😘删除 URL 组0xFE00000E20000010。状态0x0。用户 LOCAL SERVICE \Device\HarddiskVolume3\Windows\System32\svchost.exe0x11E4可执行文件路径的进程 ID',
        date: '2023-9-1 18:58:59'
      }
    ]
  }
])

const type = ref('1')
const type2 = ref('2')

const segmentedRef = ref()

const typeList: TagSelectOption[] = [
  {
    label: '不限',
    value: '0',
    icon: 'Warning'
  },
  {
    label: '国内',
    value: '1',
    icon: 'Tools'
  },
  {
    label: '国外',
    value: '2',
    icon: 'Tools'
  },
  {
    label: '火星',
    value: '3',
    icon: 'User'
  },
  {
    label: '水星',
    value: '4',
    icon: 'SvgIconDemo'
  }
]

const typeList2: TagSelectOption[] = [
  {
    label: '不限',
    value: '0'
  },
  {
    label: '国内',
    value: '1'
  },
  {
    label: '国外',
    value: '2'
  },
  {
    label: '火星',
    value: '3'
  },
  {
    label: '水星',
    value: '4',
    icon: 'SvgIconDemo'
  }
]

const typeList3: SegmentedOption[] = [
  {
    label: '不限',
    value: '0'
  },
  {
    label: '国内',
    value: '1',
    disabled: true
  },
  {
    label: '国外',
    value: '2'
  },
  {
    label: '火星',
    value: '3'
  },
  {
    label: '水星',
    value: '4',
    icon: 'SvgIconDemo',
    disabled: true
  }
]

const imgList = ref<ImgPreviewBoxImg[]>([])

const openLoading = () => {
  const loadingObj = LoadingBarBox({
    label: '正在加载中...',
    barLabelStyle: {
      color: 'var(--el-color-primary)'
    }
  })

  const st = setTimeout(() => {
    clearTimeout(st)
    loadingObj.close()
  }, 1500)
}

const openLoading2 = () => {
  const loadingObj2 = LoadingBarBox({
    label: '正在加载中...',
    content: (config: LoadingBar) => {
      const label = config && config.label ? config.label + '' : ''
      return h(
        'div',
        {
          style: {
            textAlign: 'center',
            color: 'var(--el-color-primary)'
          }
        },
        [label]
      )
    }
  })

  const st = setTimeout(() => {
    clearTimeout(st)
    loadingObj2.close()
  }, 1200)
}

const segmentedSelect = () => {
  //通过方法设置值
  //segmentedRef.value.selectItemByValue('0')
  //segmentedRef.value.selectItemByLabel('不限')
  //segmentedRef.value.selectItemByIndex(0)
  segmentedRef.value.selectItemByKey('label', '不限')
}

const getRippleButtonMethod = () => {
  console.info(rippleButtonRef.value.disabled)
}

const cardClick = (item: DataBoardInfo, card: DataBoardInfoItem, index: number) => {
  console.log(item)
  console.log(card)
  console.log(index)
}

const intiImgs = () => {
  for (let i = 0; i < 24; i++) {
    imgList.value.push({
      url: imgs[i],
      title: '这是一张很漂亮图片' + i
    })
  }
}

onMounted(() => {
  intiImgs()
})
</script>

<style lang="scss" scoped>
.demo {
  width: 100%;
  display: flex;
  margin-bottom: 10px;
  align-items: center;

  .label {
    width: 120px;
  }

  .content {
    width: calc(100% - 120px);
    display: flex;
  }
}
</style>
